<template>
	<view class="container">
		<view class="top_box">
			<image src="https://cdjjyl.com.cn/images/isp/zhengbing.png" class="bg"></image>
			<view class="apply_box">
				<!-- 点击报名出现应征报名须知弹框？不在招兵期无法点击报名 -->
				<view class="apply" @click="toApply('../conscription/apply',0)">
					<image src="/static/image/apply.png" style="width: 68upx;height: 66upx;align-self:center">
					</image>
					<view class="announce_all">
						<view class="announce_title">应征报名</view>
						<view class="announce_text">参军报国，无上光荣</view>
					</view>
				</view>
				<view class="announce" @click="navTo('../conscription/announce',0)">
					<image src="/static/image/announce.png" style="width: 68upx;height: 66upx;align-self:center">
					</image>
					<view class="announce_all">
						<view class="announce_title">征兵公告</view>
						<view class="announce_text">查看最新征兵消息</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<view class="swiper_contain">
				<scroll-view class="swiper-tab" :scroll-x="true">
					<block v-for="(item,index) in typeList" :key="index">
						<view :class="currentTab == index?'swiper-tab-list on':'swiper-tab-list'" @click="swichNav" :data-current="index">
							{{item.tagName}}
						</view>
					</block>
				</scroll-view>
				<swiper :current="currentTab" @change="bindChange">
					<swiper-item v-for="(item,index) in typeList" :key="index">
						<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
							<empty v-if="dataList.length == 0"></empty>
							<view v-else>
								<view v-if="currentTab == 0" class="news_box" v-for="(dataItem,dataIndex) in dataList" :key="dataIndex" @click="navTo('/package_isp/pages/unionInfo/details',dataItem)">
									<view class="news-text">
										<view class="news_title">{{dataItem.title}}</view>
										<view class="news_time">{{dataItem.publishTime}}</view>
									</view>
									<view class="news_img">
										<image :src="dataItem.coverImageUrl || noPhoto" class="news_img"></image>
									</view>
								</view>
								<view v-if="currentTab == 1||currentTab == 2" class="list_box" v-for="(dataItem,dataIndex) in dataList" @click="navTo('/package_isp/pages/threeAffairs/details',dataItem)"
								 :key="dataIndex">
									<view class="border"></view>
									<view class="list-icon borderStyle">
										<view style="font-size: 30upx;font-weight: normal;">
											{{dataItem.month}}-{{dataItem.day}}
										</view>
										<view>{{dataItem.year}}</view>
									</view>
									<view class="list_title">{{dataItem.title}}</view>
								</view>
							</view>
							<uni-load-more :status="loadingType" style="height: 60upx;"></uni-load-more>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				currentTab: 0,
				dataList: [],
				loadingType: "more",
				page: 1,
				pageSize: 6,
				total: 0,
				typeList: [],
				communityId: this.$api.util.getAreaCode(),
				noPhoto: "https://cdjjyl.com.cn/images/noPhoto.png",
				conscriptionInfo: null,
				canApply: false
			}
		},
		components: {
			empty
		},
		onLoad() {
			this.inquiryTag()
			// 获取征兵公告列表，并取第一个
			this.getConscriptionList()
		},
		methods: {
			getConscriptionList() {
				let params = {
					"areaCode": this.communityId,
					"pageSize": 1,
					"page": 1,
					"activityType": "2", //参军活动
					"fromPhone": "1"
				}
				this.$api.request.queryActivities(params, (res) => {
					if (res.body.status.statusCode === '0') {
						let activities = res.body.data.lists;
						if (activities.length > 0) {
							this.conscriptionInfo = activities[0].activity;
						}
					} else {
						this.$api.msg("系统出错了")
					}
				},true)
			},
			isApplyActivity(){
				console.log(this.conscriptionInfo)
				if (!this.conscriptionInfo) {
					this.$api.msg("暂未发布征兵公告！")
					this.canApply = false;
					return;
				}
				let startTime = new Date(this.conscriptionInfo.activityEnrollStartTime).getTime();
				let endTime = new Date(this.conscriptionInfo.activtiyEnrollEndTime).getTime();
				let nowTime = new Date().getTime();
				if (startTime > nowTime) {
					this.$api.msg("活动还未开始")
					this.canApply = false;
					return;
				} else if (endTime < nowTime) {
					this.$api.msg("活动已经结束")
					this.canApply = false;
					return;
				}
				this.canApply = true;
			},
			inquiryTag() {
				let params = {
					"areaCode": this.communityId,
					// "areaCode": this.areaCode,
					"tagType": 'INFORMATION'
				}
				this.$api.request.inquiryTag(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.typeList = res.body.data.tags
						this.getDataList(1, this.typeList[0])
					}
				},true)
			},
			getDataList(page, tag) {
				let params = {
					"areaCode": this.communityId,
					"pageSize": 10,
					"page": page,
					"tagType": "INFORMATION",
					"tagUuid": tag.tagUuid,
					"isPublished": true
				}
				this.$api.request.getArticalList(params, (res) => {
					if (res.body.status.statusCode === '0') {
						let result = res.body.data.list;
						console.log(result.length)
						for (let i = 0; i < result.length; i++) {
							let monthAndDay = result[i].publishTime.split(' ')[0].split("-")
							let item = {
								pressReleaseUuid: result[i].pressReleaseUuid,
								title: result[i].title,
								coverImageUrl: result[i].coverImageUrl,
								publishTime: result[i].publishTime,
								year: monthAndDay[0],
								month: monthAndDay[1],
								day: monthAndDay[2]
							}
							this.dataList.push(item)
						}
						this.total = res.body.data.total
						if (this.dataList.length >= this.total) {
							this.loadingType = "noMore"
						}
					} else {
						this.$api.msg("系统出错了")
					}
				})
			},
			navTo(url, item) {
				uni.navigateTo({
					url: url + '?dataUuid=' + item.activityUuid
				})
			},
			toApply(url, item){
				console.log(item)
				this.isApplyActivity();
				if(this.canApply){
					uni.navigateTo({
						url: url
					})
				}
			},
			//加载更多
			loadMore() {
				if (this.loadingType == 'more') {
					this.page = this.page + 1;
					this.getDataList(this.page, this.typeList[this.currentTab]);
				}
			},
			swichNav: function(e) {
				this.currentTab = e.target.dataset.current;
			},
			bindChange: function(e) {
				this.currentTab = e.target.current
				this.loadingType = "more"
				this.page = 1;
				this.dataList = []
				this.getDataList(this.page, this.typeList[this.currentTab]);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		/* background-color: #FBFBFB; */
		overflow: hidden;
		/* padding: 32upx 20upx 32upx 20upx; */
	}

	.top_box {
		height: 546upx;
		padding: 342upx 32upx 0;
		position: relative;

		.bg {
			filter: drop-shadow(0px 4upx 22upx rgba(0, 0, 0, 0.2));
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 418upx;
		}
	}



	.apply_box {
		position: relative;
		background: white;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
		border-radius: 30upx;
		height: 200upx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.announce {
		display: flex;
		height: 80upx;
		width: calc(50% - 60upx);
		margin-right: 20upx;
		margin-left: auto;
	}

	.apply {
		margin-left: 40upx;
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		width: calc(50% - 40upx);
		position: relative;
		border-right: 2upx solid #D8D8D8;
	}

	// .borderStyle::after {
	// 	content: '';
	// 	position: relative;
	// 	// bottom: 20upx;
	// 	// left: 12upx;
	// 	height: 120upx;
	// 	width: 2upx;
	// 	background-color: #D8D8D8;
	// }

	.announce_all {
		display: flex;
		flex-direction: column;
		margin-left: 16upx;
		justify-content: space-between;
	}

	.announce_text {
		font-size: 22upx;
		color: #999999
	}

	.announce_title {
		font-size: 30upx;
		font-weight: bold;
	}

	.bottom_box {
		margin: 32upx;
		background: white;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
		border-radius: 15px;
		height: 820upx;
		width: 685upx;
	}

	.swiper-tab-list {
		// font-size: 30upx;
		font-weight: 600;
		display: inline-block;
		width: 18%;
		margin: 0 44upx;
		color: #999999;
	}

	.swiper-box {
		display: block;
		width: 100%;
	}

	.swiper-box view {
		text-align: center;
	}

	.on {
		color: #CC2C2C;
		border-bottom: 4upx solid #CC2C2C;
	}

	.swiper_contain {
		width: 100%;
		height: calc(100% - 82upx);
	}

	swiper {
		height: calc(100% - 20upx);
		/* padding: 0 0 20upx 0upx; */
	}

	.swiper-tab {
		margin-top: 20upx;
		/* width: 100%; */
		text-align: center;
		line-height: 80upx;
	}

	.list-scroll-content {
		height: 100%;
		padding: 20upx 16upx 0 16upx;
	}

	.news_box {
		width: 99%;
		background: #FFFFFF;
		box-shadow: 2upx 2upx 20upx -2upx rgba(0, 0, 0, 0.1);
		border-radius: 20upx;
		height: 220upx;
		margin-bottom: 16upx;
		padding: 16upx;
		display: flex;
		justify-content: space-between
	}

	.news-text {
		width: 356upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.news_title {
		font-size: 28upx;
		overflow: hidden;
		max-height: 120upx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.news_time {
		font-size: 24upx;
		color: #999999;
	}

	.news_img {
		width: 252upx;
		height: 188upx;
		border-radius: 8upx;
	}

	.list_box {
		width: 99%;
		background: #FFFFFF;
		box-shadow: 2upx 2upx 20upx -2upx rgba(0, 0, 0, 0.1);
		height: 100upx;
		display: flex;
		margin-bottom: 24upx;
	}

	.border {
		width: 8upx;
		height: 100%;
		background: #CC2C2C;
	}

	.list-icon {
		font-size: 24upx;
		text-align: center;
		font-weight: lighter;
		margin-right: 32upx;
		padding: 18upx;
		width: 130upx;
		position: relative
	}

	.borderStyle::after {
		content: '';
		position: absolute;
		bottom: 20upx;
		right: 0;
		height: 60upx;
		width: 2upx;
		background-color: #979797;
	}

	.list_title {
		width: 488upx;
		line-height: 100upx;
		border-radius: 50upx;
		font-size: 30upx;
		font-weight: bold;
		transition: all .5s;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
